<template>
    <!-- 右侧界面统一宽度的组件 -->
    <!-- showTopBorder配置是否显示顶上的一条线 -->
    <div class="content-panel" :style="{ 'border-top': showTopBorder ? '1px solid #ddd' : 'none' }">
        <div class="content-inner">
            <!-- 外部组件插槽 -->
            <slot></slot>
        </div>
    </div>
</template>

<script setup>

const props = defineProps({
    showTopBorder: {
        type: Boolean,
        default: true
    }
})
</script>

<style lang="scss" scoped>
.content-panel {
    overflow: auto;
    height: calc(100vh - 64px);

    .content-inner {
        margin: 0px auto;
        width: 400px;
    }
}
</style>
